<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="/0.5/components/polymer/polymer.html">
<link rel="import" href="/0.5/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/0.5/components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/0.5/components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="/0.5/components/core-menu/core-menu.html">
<link rel="import" href="/0.5/components/paper-item/paper-item.html">

<polymer-element name="app-bar" attributes="theme home badge">
  <template>
    <link rel="stylesheet" href="../../css/elements/app-bar.css">
    <div layout horizontal center flex>
      <paper-icon-button id="hamburger" on-click="{{onMenuClick}}" icon="menu"></paper-icon-button>
    </div>
    <template if="{{home}}">
      <content></content>
    </template>
    <!-- <span class="polymer-status-badge" hidden?="{{!badge.length}}">{{badge}}</span> -->

    <paper-dropdown-menu class="site-switcher" label="Version">
      <paper-dropdown class="dropdown" halign="right">
        <core-menu class="menu" selected="1.0" valueattr="data-version">
          <paper-item noink data-version="1.0">
            <a href="/1.0/" data-external-link>
              v. 1.0
            </a>
          </paper-item>
          <paper-item noink data-version="0.5">
            <a href="/0.5/" data-external-link>
              v. 0.5
            </a>
          </paper-item>
        </core-menu>
      </paper-dropdown>
    </paper-dropdown-menu>

    <div id="search" show?="{{showingSearch}}" on-click="{{toggleSearch}}">
      <paper-icon-button icon="search"></paper-icon-button>
      <input type="search" id="input" on-keyup="{{onKeyPress}}" on-blur="{{disableSearch}}" autocomplete="off">
    </div>
  </template>
  <script>
    Polymer({
      theme: 'dark',
      home: false,
      showingSearch: false,
      badge: '',
      toggleSearch: function(e, detail, sender) {
        if (e) { // comes first
          e.stopPropagation();
        }
        if (e.target === this.$.input) {
          return;
        }

        this.showingSearch = !this.showingSearch;
        this.classList.toggle('search-on');
        this.async(function() {
          this.$.input.focus();
        });
      },
      disableSearch: function() {
        this.classList.remove('search-on');
        this.showingSearch = false;
      },
      onKeyPress: function(e, detail, sender) {
        if (e.keyCode == 13) { // Enter
          if (sender.value) {
            recordSearch(sender.value);
            var q = 'site:polymer-project.org/1.0+' + sender.value;
            window.open('https://www.google.com/search?q=' + q);
          }
        }
      },
      onMenuClick: function () {
        this.fire('hamburger-time');
      }
    });
  </script>
</polymer-element>
